<template>
	<view class="agespage">
		<view class="column">
			<view class="title">工程质量监督检查整改通知-20250520</view>
			<u-cell-group :border="false">
				<u-cell title="整改类型" :border="true" :value="dictLabel(enterprise_rectification_type, contData.rectifyType)"></u-cell>
				<u-cell title="项目名称" :border="true" :value="contData.projectName||'--'"></u-cell>
				<u-cell title="下发时间" :border="true" :value="(contData.createTime||'--').split(' ')[0]"></u-cell>
				<u-cell title="整改期限" :border="true" :value="(contData.rectifyDeadline||'--').split(' ')[0]"></u-cell>
				<u-cell title="下发人" :border="false" :value="contData.issueUser||'--'"></u-cell>
				<u-cell title="整改状态" :border="false">
					<template #value>
						<dictTag :options="rectification_status" :value="contData.status.toString()" class="tag" :style="statuscy(contData.status)" v-if="contData.status!==null&&contData.status!==undefined" />
						<view v-else>--</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="collapse">
			<view class="item">
				<view class="tit" @click="collclose(0)">
					<text>附件材料</text>
					<u-icon :name="!collapseList[0] ? 'arrow-right' : 'arrow-down'" size="16"></u-icon>
				</view>
				<view :class="collapseList[0] ? 'cont' : 'conts cont'">
					<view style="padding: 10px;background: #f5f5f5;display: flex;align-items: center;justify-content: space-between;border-radius: 5px;margin-bottom: 5px;" v-for="(item, index) in contData.files" :key="index" @click="fileview(item.url)">
						<view style="width: 35px;height: 35px;background: #F54A2E;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
							<u-icon name="file-text" color="#fff" size="20"></u-icon>
						</view>
						<view style="flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-left: 10px;font-size: 13px;">{{ item.fileName || item.originalName || '--' }}</view>
					</view>
					
					<view v-if="contData.files.length==0">
						<u-empty text="暂无数据" :icon="emptyIcon"></u-empty>
					</view>
				</view>
			</view>
			<view class="item" v-if="noticeState">
				<view class="tit" @click="collclose(1)">
					<text>整改回复</text>
					<u-icon :name="!collapseList[1] ? 'arrow-right' : 'arrow-down'" size="16"></u-icon>
				</view>
				<view :class="collapseList[1] ? 'cont' : 'conts cont'">
					<u-form ref="form" :model="formData" :rules="rules">
						<!-- <u-form-item label-width="100">
							<template #label>
								<text style="color: #888;">整改回复</text>
							</template>
						</u-form-item> -->
						<u-form-item prop="content" label-width="0">
							<u-textarea v-model="formData.content" count maxlength="500"></u-textarea>
						</u-form-item>
						<u-form-item prop="files" label-width="0">
							<view style="flex:1;">
								<view>
									<view style="padding: 10px 10px;background: #f5f5f5;border-radius: 3px;margin-bottom: 20rpx;" v-for="(item,index) in formData.files" :key="index">
										<view style="display: flex;align-items: center;color: #666;">
											<view style="display: flex;flex: 1;align-items: center;">
											<view style="width: 60rpx;height: 60rpx;border-radius: 6rpx;display: flex;align-items: center;justify-content: center;background: #aaa;">
												<u-icon name="file-text" size="20" color="#fff"></u-icon>
											</view>
											<text style="padding: 0 10px;width: 480rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{ item.fileName || item.name }}</text>
											</view>
											<view style="color: #1e77ff;font-size:28rpx;white-space: nowrap;" @click="fileDel(index)">删除</view>
										</view>
									</view>
								</view>
								<u-button type="primary" plain icon="plus" @click="sendFile()" v-if="formData.files.length<9">整改材料</u-button>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		
		<view style="height: 180rpx;" v-if="noticeState">
			<view style="position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx 30rpx 60rpx 30rpx;box-shadow: 0 0 5px 2px #eee;z-index: 5;background: #fff;">
				<u-button type="primary" @click="onsubmit()">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import emptyIcon from "@/pagesC/static/images/ndata.png"
import {enterprise_rectification_type, rectification_status,dictLabel} from "@/utils/common.js"
import { upLoad,rectifyNoticeDetail,rectifyNoticeAdd } from '@/api/qss/zxhapi.js'

const collapseList = ref([1,1,1])
const contData = ref({files:[]})
const form = ref('')
const pageId = ref('')
const noticeState = ref(true)
const formData = ref({
	noticeId: '',
	content: '',
	files: []
})
const rules = ref({
    content:[{ required: true, message: '请输入整改内容' }]
})

function collclose(index){
	collapseList.value[index] = !collapseList.value[index]
}

//详情
function getCont(){
	rectifyNoticeDetail(pageId.value).then(res=>{
		console.log(res,'详情')
		contData.value = res.data || {files:[]}
		noticeState.value = contData.value.status === 0 ? true : false
	}).finally(()=>{
		uni.hideLoading()
	})
}

//上传附件
function sendFile(){
	// #ifdef H5
	uni.chooseFile({
		count: 1,
		type: 'all',
		success: res => {
			console.log(res)
			if (res.tempFiles[0].size < 20*1024*1024) {
				let file = {path: res.tempFilePaths[0], name: res.tempFiles[0].name}
				fileupload(file)
			} else {
				uni.showModal({ title: '', showCancel: false, content: '超出20M限制大小' })
			}
		}
	});
	// #endif
	
	// #ifdef MP-WEIXIN
	wx.chooseMessageFile({
		count: 1,
		type: 'all',
		success: res => {
			console.log(res)
			if (res.tempFiles[0].size < 20*1024*1024) {
				let file = {path: res.tempFiles[0].path, name: res.tempFiles[0].name}
				fileupload(file)
			} else {
				uni.showModal({ title: '', showCancel: false, content: '超出20M限制大小' })
			}
		}
	});
	// #endif
}

//上传
function fileupload(file){
	upLoad(file).then(res=>{
		// console.log(res, '上传')
		if(res.data){
			res.data.dsType="qy_zgcl"
			res.data.name= file.name ||res.data.fileName
			res.data.fileName= file.name ||res.data.fileName
			res.data.uid = new Date().getTime()
			formData.value.files.push(res.data)
		} else {
			if(res.code == 401){
				uni.showToast({ title: "登录已过期", icon: "none"})
				setTimeout(()=>{
					uni.removeStorageSync("token")
					uni.removeStorageSync("phone")
					uni.removeStorageSync('userInfo')
					// uni.removeStorageSync('role')
					uni.removeStorageSync('activeProject')
					uni.reLaunch({
						url: "/pages/login/index"
					})
				}, 500)
			}
		}
	}).finally(()=>{
		uni.hideLoading()
	})
}

//删除附件
function fileDel(index){
    formData.value.files.splice(index, 1)
}

//提交
function onsubmit(){
	form.value.validate().then(() => {
		rectifyNoticeAdd(formData.value).then(res=>{
			// console.log(res)
			if(res.code == 200){
				uni.setStorageSync('grrangeshop', 1)
				formData.value.content = ''
				formData.value.files = []
				uni.showToast({ title: "提交成功", duration: 1000 })
				getCont()
			}
		}).finally(()=>{
			uni.hideLoading()
		})
	}).catch(err => {
		//验证未通过
	})
}

function statuscy(type) {
	let style = {}
	if (type == 1) {
		style = { background: '#FFF9EF', color: '#F59B03', borderColor: '#F59B03' }
	} else if (type == 2) {
		style = { background: '#E3F5FF', color: '#25B2FD', borderColor: '#25B2FD' }
	} else if (type == 3) {
		style = { background: '#FFF1F1', color: '#F92525', borderColor: '#F92525' }
	} else {
		style = { background: '#f5f5f5', color: '#888888', borderColor: '#dddddd' }
	}
	return style
}

//查看文件
const token = uni.getStorageSync('token')
function fileview(url) {
    if (url) {
        let type = url.split('.')
        type = type[type.length - 1]
		url = url + `?Authorization=Bearer ${token}&platform=corp`
        if (type == 'jpg' || type == 'png' || type == 'jpeg' || type == 'gif' || type == 'bmp') {
			uni.previewImage({
				current: url, urls: [url]
			})
		} else {
			uni.showLoading({ title: '正在下载' })
			uni.downloadFile({
				url: url,
				// header: {Authorization: 'Bearer '+uni.getStorageSync('token')},
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode == 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true,
							fileType: type,
							success: function(resData) {
								//打开成功
							},
							fail(err) {
								uni.showModal({showCancel: false,content: "文件类型不支持"})
							}
						})
					}
				},
				fail(err) {
					uni.hideLoading()
					uni.showModal({showCancel:false,content:"文件下载失败"})
				}
			})
		}
    } else {
		uni.showModal({showCancel: false,content: "文件路径无效"})
	}
}

onLoad((option)=>{
	pageId.value = option.id || ''
	formData.value.noticeId = option.id || ''
	if(pageId.value){
		getCont()
	}
})

</script>

<style lang="less" scoped>
.agespage{
	min-height: 100%;
	background: #f8f8f8;
	.column{
		border-top: 30rpx solid #f8f8f8;
		background: #fff;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx;
		}
		.tag {
			background-color: #e3f0ff;
			color: #1e77ff;
			line-height: 1.2;
			font-size: 24rpx;
			padding: 4rpx 10rpx;
			border: 1px solid #e3f0ff;
			border-radius: 4px;
			display: inline-block;
		}
		::v-deep .u-cell__title-text{
			color: #666;
			width: 120rpx;
		}
	}
	.collapse {
		flex: 1;
	
		.item {
			margin-top: 30rpx;
			background: #fff;
	
			.tit {
				height: 84rpx;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 30rpx;
			}
	
			.cont {
				padding: 0 30rpx 30rpx 30rpx;
			}
	
			.conts {
				position: fixed;
				top: -10000;
				right: 200%;
			}
		}
	}
}
</style>